<template>
  <menu-add
    v-model:show="add.visible.value"
    :parent-info="addCheckNode"
    @refresh-data="initTreeData"
  ></menu-add>

  <div style="margin-bottom: 10px">
    <el-button type="warning" size="small">+ 顶级菜单</el-button>
  </div>
  <div ref="menuTreeBoxRef" class="menu-tree-box" style="height: 100%">
    <el-input
      v-model="filterText"
      placeholder="请输入菜单名称"
      style="margin-bottom: 10px"
    />

    <el-scrollbar :height="`${menuTreeBoxElementSize.height.value - 50}px`">
      <el-tree
        ref="treeRef"
        class="filter-tree"
        :data="data"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        :highlight-current="true"
        :expand-on-click-node="false"
      >
        <template #default="{ node, data }">
          <div
            style="width: 100%"
            @click="menuDetailAndButtonPermissionHandle(data)"
          >
            {{ node.label }}
          </div>

          <div
            v-if="data.type != 2"
            style="position: absolute; right: 20px"
            @click.stop="addChildrenHandle(data)"
          >
            <el-icon size="15"><Plus /></el-icon>
          </div>
        </template>
      </el-tree>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts" generic="T,R,V">
import { h } from 'vue'
import { R, get } from '@/utils/http/request'
import { useElementSize } from '@vueuse/core'
import { ElButton, ElTree } from 'element-plus'
import mitt from 'mitt'

import { $bus } from '@/utils/common/mitt'
import { getMenuDetailAndButtonPermission, getMenuTree } from '@/api/system'
import type { MenuTree } from '@/api/system'
import MenuAdd from './menu-add.vue'
import useVisible from '@/hooks/useVisible'

const menuTreeBoxRef = ref()

const menuTreeBoxElementSize = useElementSize(menuTreeBoxRef)

const emit = defineEmits<{
  (e: 'treeNodeHandle', id: number): void
}>()
const props = defineProps({
  propData: {
    type: String,
    default: '',
  },
})
//const { } = toRefs(props);

const add = useVisible()

const menuDetailAndButtonPermissionHandle = async (row: MenuTree) => {
  console.log(77777777777)

  const res = await getMenuDetailAndButtonPermission(row.id as number)

  if (res.code === 200) {
    $bus.emit('initMenuDetailAndButtonPermission', res.data)
  }
  //emit('treeNodeHandle', row.id)
}

const addCheckNode = ref<MenuTree>()
const addChildrenHandle = (row: MenuTree) => {
  console.log(row)
  addCheckNode.value = null as any
  addCheckNode.value = row
  add.toggle()
}

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

const defaultProps = {
  children: 'children',
  label: 'title',
}

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

const filterNode: any = (value: string, data: MenuTree) => {
  if (!value) return true
  return data.title.includes(value)
}

const data = ref<MenuTree[]>([])
const initTreeData = async () => {
  const res = await getMenuTree()

  data.value = res.data
  console.log(res)

  emit('treeNodeHandle', 1)
}

initTreeData()
</script>
<style lang="scss" scoped>
.menu-node {
  color: antiquewhite;
}
</style>
